<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="dialogFormVisible = true">新增场景</el-button>
        <el-dialog title="新增场景" :visible.sync="dialogFormVisible">
          <el-form :model="create_form">
            <el-form-item label="场景名称" :label-width="formLabelWidth">
              <el-input v-model="create_form.scene_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="接口列表" :label-width="formLabelWidth">
              <el-input  v-model="create_form.api_name_list" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="create">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="10">
        <el-form :inline="true" :model="examine_data" ref="examine_case_data" class="demo-form-inline">
          <el-button type="primary" @click="examine">查询</el-button>
        </el-form>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin: 20px 0"
      max-height="900"
    >
      <el-table-column prop="create_time" label="创建日期" width="200"></el-table-column>
      <el-table-column prop="scene_name" label="场景名称" width="200"></el-table-column>
      <el-table-column prop="api_name_list" label="接口列表" width="200"></el-table-column>


    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Config",
    methods: {
      handleEdit(index, row) {
        this.up_dialogFormVisible = true;
        console.log(index, row);
        this.update_form = row
      },
      cancel() {
        this.up_dialogFormVisible = false;
        this.refresh();
      },

      create() {
        try {
          this.create_form.api_name_list=JSON.parse(this.create_form.api_name_list);
        }
        catch (e) {
        }
        this.$xin.post(this.http + "/v1/apis/scene_record", this.create_form).then(res => {
          this.dialogFormVisible = false;
          if (res.request.status == 200) {
            this.$message({
              message: 'cg',
              type: 'success'
            });

          }
        }).catch(err => {
          this.$message.error(err.response);

        })
      },

      examine() {
        this.$xin.post(this.http + "/v1/apis/get_scene_record").then(res => {
          this.tableData = res.data;
          this.$message({
            message: '查询成功',
            type: 'success'
          });

        }).catch(err => {
          this.$message.error('参数错误');
        })
      },
      //页面刷新
      refresh() {
        this.$xin.post(this.http + "/v1/apis/get_scene_record").then(res => {
          this.tableData = res.data;
        })
      }
    },

    data() {
      return {
        http: this.config.ip,
        tableData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        up_dialogTableVisible: false,
        up_dialogFormVisible: false,
        create_form: {
          scene_name: "",
          api_name_list: ""
        },
        formLabelWidth: '120px'
      }

    },
    mounted() {
      this.refresh();
    }


  }
</script>

<style scoped>

</style>
